import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useDispatch, useSelector } from 'react-redux'
import {addCollect} from '@/store/modules/collect'
export default function Leaderboard() {
  const collectList=useSelector((state)=>{
    console.log('state',state.collect.collectList);
    return state.collect.collectList
  })
  const [list,setList]=useState([])
  const getLeaderboardApi=()=>{
    axios.get('http://apif.java.crmeb.net/api/front/product/leaderboard').then(result=>{
        console.log('result',result.data.data);
        setList(result.data.data)
    }).catch(err=>{
        console.log(err);
    })
    
  }
  useEffect(()=>{
    getLeaderboardApi()
  },[])

  const dispatch=useDispatch()

  const addCollectToList=(item)=>{
    console.log('item',item);
    dispatch(addCollect(item))
  }
  return (
    <div>
        <h1>商品排行榜</h1>
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>图片</td>
                    <td>单价</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                {
                    list.length>0?list.map(item=><tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.storeName}</td>
                        <td><img src={item.image} style={{width:'50px'}} /></td>
                        <td>{item.otPrice}</td>
                        <td><button onClick={()=>addCollectToList(item)}>收藏</button></td>
                     </tr>):<></>
                }
            </tbody>
        </table>
        <hr />
        <ul>
          {collectList.length>0?collectList.map(item=><li key={item.id}>{item.storeName}</li>):<></>}
        </ul>
    </div>
  )
}
